<template>
    <!-- 首页 -->
    <div class="main">
        <div class="top">
            <div>亲爱的管理员，{{topLeft}}！</div>
            <img src="@/assets/top1.png" alt="">
        </div>
        <div class="center">
            <div class="centerone">今日待处理事项</div>
            <div class="centertwo">
                <div style="display: flex; justify-content: center;align-items: center;">
                    <img src="@/assets/person.png" alt="">
                    <div class="person">
                        <div style="margin: 5% 0 5% 10%; display: flex; justify-content: center;align-items: center;">
                            用户信息未填写</div>
                        <div style="margin: 0% 0 0 10%; display: flex; justify-content: center;align-items: center;">
                            {{person}}人</div>
                    </div>
                </div>
                <div style="display: flex; justify-content: center;align-items: center;">
                    <img src="@/assets/zhujie.png" alt="">
                    <div class="person">
                        <div style="margin: 5% 0 5% 10%; display: flex; justify-content: center;align-items: center;">
                            用户未支付费用</div>
                        <div style="margin: 0% 0 0 10%; display: flex; justify-content: center;align-items: center;">{{nopay}}人
                        </div>
                    </div>
                </div>
                <div style="display: flex; justify-content: center;align-items: center;">
                    <img src="@/assets/car.png" alt="">
                    <div class="person">
                        <div style="margin: 5% 0 5% 10%; display: flex; justify-content: center;align-items: center;">
                            车辆损坏</div>
                        <div style="margin: 0% 0 0 10%; display: flex; justify-content: center;align-items: center;">
                            {{bikes}} 辆</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { userInformationAPI, bikeDataAPI, getrecordAPI } from "@/api";
    export default {
        data() {
            return {
                bikes:0,
                nopay:0,
                person: 0,
                topLeft: '',
            }
        },
        created() {
            this.topLefts()
            this.users()
            this.record()
            this.bikeData()
        },
        methods: {
            //未支付
            async bikeData() {
                const { data: res } = await bikeDataAPI()
                if (res.status == 0) {
                    res.data.forEach(item => {
                        if (item.bikeType == '损坏') {
                            this.bikes = this.bikes + 1
                        }
                    });
                }
            },
            //未支付
            async record() {
                const { data: res } = await getrecordAPI()
                if (res.status == 0) {
                    res.data.forEach(item => {
                        if (item.paymentStatus == '未支付') {
                            this.nopay = this.nopay + 1
                        }
                    });
                }
            },
            //用户信息
            async users() {
                const { data: res } = await userInformationAPI()
                if (res.status == 0) {
                    res.data.forEach(item => {
                        if (item.name == null || item.name == '') {
                            this.person = this.person + 1
                        }
                    });
                }
            },
            topLefts() {
                var date = new Date();
                let a = date.getHours();
                if (a > 18 && a <= 24) {
                    this.topLeft = '晚上好'
                } else if (a >= 0 && a < 6) {
                    this.topLeft = '深夜了'
                } else if (a > 6 && a < 12) {
                    this.topLeft = '早上好'
                } else if (a >= 12 && a <= 18) {
                    this.topLeft = '下午好'
                }
            }
        },
    }
</script>
<style scoped>
    .person {
        display: inline-block;
        height: 30%;
        width: 50%;
    }

    .person>div {
        margin: 1% 0 1% 2%;
        height: 30%;
        width: 80%;
    }

    .centertwo>div>img {
        display: inline-block;
        /* height: 30%;
        width: 23.5%; */
        height: 88px;
        width: 88px;
    }

    .centertwo>div {
        border: 1px solid white;
        border-radius: 30px;
        display: inline-block;
        margin: 1% 2% 0 2%;
        height: 78%;
        width: 29%;
        background-color: white;
    }

    .centertwo {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 85%;
        width: 100%;
    }

    .centerone {
        background-color: white;
        height: 10%;
        width: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        border: 1px solid white;
        border-radius: 15px;
    }

    .main {
        width: 96%;
        height: 95%;
        padding: 2% 2% 0 2%;
        ;
    }

    .center {
        padding-top: 2%;
        height: 70%;
        width: 100%;
        background-color: #E9EEF3;
        margin-top: 1%;
    }

    .top {
        height: 21%;
        width: 100%;
        border: 1px solid white;
        border-radius: 20px;
        background-color: white;
    }

    .top>div {
        width: 20%;
        height: 10%;
        display: inline-block;
        margin: 4% 0 0 2%;
        font-size: 20px;
    }

    .top>img {
        margin-right: 2%;
        width: 13%;
        height: 100%;
        display: inline-block;
        float: right;
    }
</style>